<template>
  <a-modal
    title="查看订单"
    :width="1080"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :okButtonProps="{style:{display:'none'}}"
    @cancel="handleCancel"
    cancelText="关闭"
    style="top:20px;"
  >
    <a-card :bordered="true">

      <div class="operate-container">
        <span class="color-danger">当前订单状态：{{this.model.status_dictText}}</span>
        <div class="operate-button-container">
          <a-button size="small" v-show="this.model.status === 0 && this.model.payStatus === 4" style="margin-left: 15px" @click="handleConfirm">订单确认</a-button>
          <a-button size="small" style="margin-left: 15px" @click="handleTrace">订单跟踪</a-button>
        </div>
      </div>

      <a-divider style="margin-bottom: 10px"/>
      <a-descriptions title="基本信息" bordered>
        <a-descriptions-item label="订单编号">
          {{ this.model.id }}
        </a-descriptions-item>
        <a-descriptions-item label="用户编号">
          {{ this.model.memberId }}
        </a-descriptions-item>
        <a-descriptions-item label="订单状态">
          {{ this.model.status_dictText }}
        </a-descriptions-item>
        <a-descriptions-item label="下单时间">
          {{ this.model.createTime }}
        </a-descriptions-item>
        <a-descriptions-item label="下单系统">
          {{ this.model.sourceSystem_dictText }}
        </a-descriptions-item>
        <a-descriptions-item label="货品状态">
          {{ this.model.productStatus_dictText }}
        </a-descriptions-item>
        <a-descriptions-item label="支付时间">
          {{ this.model.paymentTime }}
        </a-descriptions-item>
        <a-descriptions-item label="支付方式">
          {{ this.model.payType_dictText }}
        </a-descriptions-item>
        <a-descriptions-item label="支付状态">
          {{ this.model.payStatus_dictText }}
        </a-descriptions-item>
        <a-descriptions-item label="发货时间">
          {{ this.model.deliveryTime }}
        </a-descriptions-item>
        <a-descriptions-item label="物流公司">
          {{ this.model.deliveryCompany }}
        </a-descriptions-item>
        <a-descriptions-item label="物流单号">
          {{ this.model.deliverySn }}
        </a-descriptions-item>
      </a-descriptions>

      <a-divider style="margin-bottom: 20px"/>

      <a-descriptions title="费用信息" bordered>
        <a-descriptions-item label="商品合计">
          {{ this.model.totalAmount }}
        </a-descriptions-item>
        <a-descriptions-item label="促销">
          {{ this.model.promotionAmount }}
        </a-descriptions-item>
        <a-descriptions-item label="优惠券抵扣">
          {{ this.model.couponAmount }}
        </a-descriptions-item>
        <a-descriptions-item label="积分抵扣">
          {{ this.model.integrationAmount }}
        </a-descriptions-item>
        <a-descriptions-item label="红包抵扣">
          {{ this.model.redbagAmount }}
        </a-descriptions-item>
        <a-descriptions-item label="运费">
          {{ this.model.freightAmount }}
        </a-descriptions-item>
        <a-descriptions-item label="付款金额">
          {{ this.model.payAmount }}
        </a-descriptions-item>
        <a-descriptions-item label="退款金额">
          {{ this.model.payStatus == 4 ? this.model.payAmount - this.model.effectiveAmount : 0 }}
        </a-descriptions-item>
        <a-descriptions-item label="有效金额">
          {{ this.model.effectiveAmount }}
        </a-descriptions-item>
        <a-descriptions-item label="飞科支付单号" :span="3">
          {{ this.model.flycoTradeNo }}
        </a-descriptions-item>
        <a-descriptions-item label="支付平台单号" :span="3">
          {{ this.model.outTradeNo }}
        </a-descriptions-item>
      </a-descriptions>

      <a-divider style="margin-bottom: 20px"/>
      <a-descriptions title="收货人信息" bordered>
        <a-descriptions-item label="收货人信息">
          {{ this.model.receiverName }}
        </a-descriptions-item>
        <a-descriptions-item label="收货人电话">
          {{ this.model.receiverPhone }}
        </a-descriptions-item>
        <a-descriptions-item label="收货人所在地">
          {{ this.model.receiverProvince }} - {{ this.model.receiverCity }} - {{ this.model.receiverRegion }}
        </a-descriptions-item>
        <a-descriptions-item label="详细地址" :span="3">
          {{ this.model.receiverDetailAddress }}
        </a-descriptions-item>
        <a-descriptions-item label="订单备注" :span="3">
          {{ this.model.note }}
        </a-descriptions-item>
      </a-descriptions>

      <a-divider style="margin-bottom: 20px"/>

      <div class="title">商品信息</div>
      <a-table
        style="margin-bottom: 24px"
        rowKey="id"
        bordered
        :scroll="{ x: 800 }"
        :columns="goodsColumns"
        :pagination="false"
        :dataSource="goodsData">

      </a-table>
      <a-divider style="margin-bottom: 20px"/>
      <div class="title">发票信息</div>
      <a-table
        style="margin-bottom: 24px"
        rowKey="id"
        bordered
        :scroll="{ x: 880 }"
        :columns="invoiceColumns"
        :pagination="false"
        :dataSource="invoiceData">

      </a-table>
    </a-card>


    <oms-order-trace-modal ref="OmsOrderTraceModal"/>

  </a-modal>

</template>

<script>
  import { httpAction, putAction, postAction, getAction } from '@/api/manage'
  import DetailList from '@/components/tools/DetailList'
  import ABadge from "ant-design-vue/es/badge/Badge"
  import OmsOrderTraceModal from './StmOrderTraceModal'
  const DetailListItem = DetailList.Item

  export default {
    name: "StmOrderViewModal",
    components: {
      ABadge,
      DetailList,
      DetailListItem,
      OmsOrderTraceModal,
    },
    data () {
      return {
        visible: false,
        confirmLoading: false,
        model: {},
        url: {
          omsOrderItem: {
            list: '/stm/omsOrder/queryOmsOrderItemByMainId'
          },
          omsOrderInvoice: {
            list: '/stm/omsOrder/queryOmsOrderInvoiceByMainId'
          },
          confirmBatch: '/stm/omsOrder/confirmBatch',
        },
        goodsColumns: [
          {
            title: '名称',
            key: 'productName',
            dataIndex: 'productName'
          },
          {
            title: '货号',
            key: 'productSn',
            dataIndex: 'productSn'
          },
          {
            title: '条码',
            key: 'productSkuCode',
            dataIndex: 'productSkuCode'
          },
          {
            title: '促销',
            key: 'promotionName',
            dataIndex: 'promotionName'
          },
          {
            title: '促销金额',
            key: 'totalPromotionAmount',
            dataIndex: 'totalPromotionAmount'
          },
          {
            title: '优惠券抵扣',
            key: 'totalCouponAmount',
            dataIndex: 'totalCouponAmount'
          },
          {
            title: '积分抵扣',
            key: 'totalIntegrationAmount',
            dataIndex: 'totalIntegrationAmount'
          },
          {
            title: '红包抵扣',
            key: 'totalRedbagAmount',
            dataIndex: 'totalRedbagAmount'
          },
          {
            title: '价格',
            key: 'productPrice',
            dataIndex: 'productPrice'
          },
          {
            title: '数量',
            key: 'productQuantity',
            dataIndex: 'productQuantity'
          },
          {
            title: '小计金额',
            key: 'totalRealAmount',
            dataIndex: 'totalRealAmount'
          },
          {
            title: '商品类型',
            key: 'orderProductType_dictText',
            dataIndex: 'orderProductType_dictText'
          },
          {
            title: '申请退货退款',
            key: 'returnApplyQuantity',
            dataIndex: 'returnApplyQuantity'
          },
          {
            title: '实际退货退款',
            key: 'returnRealQuantity',
            dataIndex: 'returnRealQuantity'
          }
        ],
        invoiceColumns: [
          {
            title: '发票类型',
            key: 'invoiceType_dictText',
            dataIndex: 'invoiceType_dictText'
          },
          {
            title: '发票抬头',
            key: 'invoiceTitle',
            dataIndex: 'invoiceTitle'
          },
          {
            title: '金额',
            key: 'invoiceAmount',
            dataIndex: 'invoiceAmount'
          },
          {
            title: '税金',
            key: 'invoiceTax',
            dataIndex: 'invoiceTax'
          },
          {
            title: '纳税人识别号',
            key: 'invoiceTaxNo',
            dataIndex: 'invoiceTaxNo'
          },
          {
            title: '地址',
            key: 'vatAddress',
            dataIndex: 'vatAddress'
          },
          {
            title: '电话',
            key: 'vatPhone',
            dataIndex: 'vatPhone'
          },
          {
            title: '开户银行',
            key: 'vatBankName',
            dataIndex: 'vatBankName'
          },
          {
            title: '银行帐号',
            key: 'vatBankAccount',
            dataIndex: 'vatBankAccount'
          },
          {
            title: '发票状态',
            key: 'invoiceStatus_dictText',
            dataIndex: 'invoiceStatus_dictText'
          },
          {
            title: '是否注销',
            key: 'deleteStatus_dictText',
            dataIndex: 'deleteStatus_dictText'
          },
          {
            title: '下载地址',
            key: 'invoiceUrl',
            dataIndex: 'invoiceUrl'
          },
          {
            title: '发票号码',
            key: 'invoiceNo',
            dataIndex: 'invoiceNo'
          },
          {
            title: '发票代码',
            key: 'invoiceDm',
            dataIndex: 'invoiceDm'
          },
          {
            title: '红冲地址',
            key: 'redInvoiceUrl',
            dataIndex: 'redInvoiceUrl'
          },
          {
            title: '红冲时间',
            key: 'redInvoiceTime',
            dataIndex: 'redInvoiceTime'
          },
          {
            title: '红冲金额',
            key: 'redInvoiceAmount',
            dataIndex: 'redInvoiceAmount'
          },
          {
            title: '红冲税额',
            key: 'redInvoiceTax',
            dataIndex: 'redInvoiceTax'
          }
        ],
        goodsData:[],
        invoiceData:[],
      }
    },
    created() {
    },
    methods: {
      show(record) {
        console.log(record);
        this.visible = true;
        this.model = Object.assign({}, record);
        this.goodsData = [];
        this.invoiceData = [];
        // 加载子表数据
        if (this.model.id) {
          console.log(this.model.id);
          this.loadGoodsData();
          this.loadInvoiceData();
        }
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      loadGoodsData() {
        var params = { id: this.model.id };
        this.loading = true;
        getAction(this.url.omsOrderItem.list, params).then((res) => {
          if (res.success) {
            this.goodsData = res.result;
          }
          if(res.code===510){
            this.$message.warning(res.message)
          }
          this.loading = false;
        })
      },

      loadInvoiceData(arg) {
        var params = { id: this.model.id };
        this.loading = true;
        getAction(this.url.omsOrderInvoice.list, params).then((res) => {
          if (res.success) {
            this.invoiceData = res.result;
          }
          if(res.code===510){
            this.$message.warning(res.message)
          }
          this.loading = false;
        })
      },
      handleCancel () {
        this.close()
      },
      handleTrace () {
        this.$refs.OmsOrderTraceModal.show(this.model);
      },
      handleConfirm () {
        if ( this.model.payStatus !== 4 || this.model.status !== 0) {
          this.$message.warning('确认订单只允许选择已支付并且未确认的订单！')
          return
        }
        var ids = [this.model.id]
        var that = this
        this.$confirm({
          title: '确认订单',
          content: '是否确认选中的订单?',
          onOk: function() {
            that.loading = true
            postAction(that.url.confirmBatch, ids ).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.model.status = 1;
                that.model.status_dictText = "已确认";
                that.$emit('ok');
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.loading = false
            })
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .operate-container {
    background: #F2F6FC;
    height: 80px;
    margin: -25px -25px 0;
    line-height: 80px;
  }

  .operate-button-container {
    float: right;
    margin-right: 20px
  }

  .title {
    margin-bottom: 20px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: bold;
    font-size: 16px;
    line-height: 1.5;
  }

  .color-danger {
    color: #F56C6C;
    font-size: 18px;
    font-weight: 800;
  }

  .ant-modal-footer {
    padding: 10px 16px;
    text-align: right;
    border-top: 1px solid #e8e8e8;
    border-radius: 0 0 4px 4px;
    display: none;
  }
</style>